<template>
  <el-form :model="form" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
    @submit.prevent>
    <div class="card-container">
      <el-card style="{width: 100% !important}" shadow="never">
        <template #header>
          <div class="clear-fix">
            <span>试题录入</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
        </template>
        <el-form-item label="学科:" prop="subjectID" class="required">
          <el-select v-model="form.subjectID" class="full-width-input LimitWidth" clearable @change="change">
            <el-option v-for="(item, index) in subjectIDOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID" class="required">
          <el-select v-model="form.catalogID" class="full-width-input LimitWidth" clearable>
            <el-option v-for="(item, index) in catalogIDOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="company" class="required">
          <el-select v-model="form.enterpriseID" class="full-width-input LimitWidth" clearable>
            <el-option v-for="(item, index) in companyOptions" :key="index" :label="item.company" :value="item.id"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item label="城市:" prop="province" class="required">
            <el-select v-model="form.province" class="full-width-input" clearable style="width: 198px;"
              @change="changeCity">
              <el-option v-for="(item, index) in provincesOptions" :key="index" :label="item" :value="item"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="city">
            <el-select v-model="form.city" class="full-width-input" clearable style="width: 198px;margin-left: 4px;">
              <el-option v-for="(item, index) in citysOptions" :key="index" :label="item" :value="item"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="方向:" prop="direction" class="required">
          <el-select v-model="form.direction" class="full-width-input LimitWidth" clearable>
            <el-option v-for="(item, index) in directionOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="questionType" class="required">
          <el-radio-group v-model="form.questionType">
            <el-radio v-for="(item, index) in questionTypeOptions" :key="index" :label="item.value"
              :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty" class="required">
          <el-radio-group v-model="form.difficulty">
            <el-radio v-for="(item, index) in difficultyOptions" :key="index" :label="item.value"
              :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="question" class="required">
          <!-- <vue-editor v-model="form.question"></vue-editor> -->
          <quill-editor v-model:value="form.question" />
        </el-form-item>
        <el-row v-if="form.questionType !== 3">
          <el-col :md="3" :sm="8" :xs="12" class="grid-cell">
            <!-- 多选 -->
            <el-form-item label="选项:" prop="option" class="FourRadio" v-if="form.questionType === '2'">
              <el-checkbox-group v-model="form.option">
                <el-checkbox v-for="(item, index) in optionOptions" :key="index" :label="item.label"
                  :disabled="item.disabled" style="{display: inline}">{{item.label}}:</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 单选 -->
            <el-form-item label="选项:" prop="option" class="FourRadio" v-else>
              <el-radio-group v-model="form.option">
                <el-radio v-for="(item, index) in optionOption" :key="index" :label="item.label"
                  :disabled="item.disabled" style="{display: block}">{{item.label}}:</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :md="5" :sm="12" :xs="12" class="grid-cell FourRadio">
            <el-form-item label="" label-width="0" prop="input24448" v-for="(item,index) in form.options" :key="index">
              <el-input v-model="item.title" type="text" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="9" :sm="12" :xs="12" class="grid-cell">
            <el-form-item label="" label-width="0" :prop="item.img" v-for="(item,index) in form.options" :key="index">
              <el-upload list-type="picture-card" show-file-list :limit="3">
                <template #default><i class="el-icon-plus"></i></template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <el-row style="margin-left: 85px; margin-bottom: 20px;" v-if="form.questionType !== '3'">
          <el-button type="danger" v-if="form.questionType === '2'" @click="addOption">+增加选项与答案</el-button>
          <el-button type="danger" disabled v-else>+增加选项与答案</el-button>
        </el-row>
        <el-form-item label="解析视频:" prop="videoURL">
          <el-input v-model="form.videoURL" type="text" clearable class="LimitWidth"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" prop="answerID" class="required">
          <!-- <vue-editor v-model="form.answerID"></vue-editor> -->
          <quill-editor v-model:value="form.answerID" />
        </el-form-item>
        <el-form-item label="题目备注:" prop="remarks">
          <el-input type="textarea" v-model="form.remarks" rows="3" class="LimitWidth"></el-input>
        </el-form-item>
        <el-form-item label="试题标签:" prop="tags">
          <el-select v-model="form.tags" class="full-width-input LimitWidth" clearable>
            <el-option v-for="(item, index) in tagsOptions" :key="index" :label="item.tagName" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <div class="static-content-item" style="margin-left: 85px;">
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </div>
      </el-card>
    </div>
  </el-form>

</template>

<script>
import { simple as subjectsSimple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { list as listCompany } from '@/api/hmmm/companys' // 企业
import { provinces, citys } from '@/api/hmmm/citys' // 城市
import { useRoute } from 'vue-router'
import { add, detail, update } from '@/api/hmmm/questions'
import { direction } from '@/api/hmmm/constants.js'
import { list as listTgs } from '@/api/hmmm/tags' // 标签

import { defineComponent, toRefs, reactive, getCurrentInstance, onMounted, watch }
  from 'vue'
import { ElMessage } from 'element-plus'
import { form } from '@/api/example/form'
import router from '@/router'
export default defineComponent({
  components: {},
  props: {},
  setup () {
    const state = reactive({
      page: {
        page: 1,
        pagesize: 999
      },
      form: {
        subjectID: undefined,
        catalogID: undefined,
        company: undefined,
        province: undefined,
        city: undefined,
        direction: undefined,
        questionType: [],
        difficulty: [],
        question: null,
        option: [],
        options: [
          { isRight: false, code: 'A', title: '22', img: '' },
          { isRight: true, code: 'B', title: '33', img: '' },
          { isRight: false, code: 'C', title: '44', img: '' },
          { isRight: false, code: 'D', title: '55', img: '' }
        ],
        videoURL: undefined,
        answerID: null,
        remarks: undefined,
        tags: undefined
      },
      rules: {
        subjectID: [{
          required: true,
          message: '字段值不可为空'
        }],
        catalogID: [{
          required: true,
          message: '字段值不可为空'
        }],
        enterpriseID: [{
          required: true,
          message: '字段值不可为空'
        }],
        city: [{
          required: true,
          message: '字段值不可为空'
        }],
        direction: [{
          required: true,
          message: '字段值不可为空'
        }],
        questionType: [{
          required: true,
          message: '字段值不可为空'
        }],
        difficulty: [{
          required: true,
          message: '字段值不可为空'
        }],
        question: [{
          required: true,
          message: '字段值不可为空'
        }],
        answerID: [{
          required: true,
          message: '字段值不可为空'
        }]
      },
      subjectIDOptions: [],
      catalogIDOptions: [],
      companyOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }],
      provincesOptions: [{}],
      citysOptions: [{}],
      select21308Options: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }],
      directionOptions: direction,
      questionTypeOptions: [{
        label: '单选',
        value: '1'
      }, {
        label: '多选',
        value: '2'
      }, {
        label: '简答',
        value: '3'
      }],
      difficultyOptions: [{
        label: '简单',
        value: '1'
      }, {
        label: '一般',
        value: '2'
      }, {
        label: '困难',
        value: '3'
      }],
      optionOption: [{
        label: 'A:',
        value: 1
      }, {
        label: 'B:',
        value: 2
      }, {
        label: 'C:',
        value: 3
      }, {
        value: 4,
        label: 'D:'
      }],
      optionOptions: [{
        label: 'A:',
        value: 1
      }, {
        label: 'B:',
        value: 2
      }, {
        label: 'C:',
        value: 3
      }, {
        value: 4,
        label: 'D:'
      }],
      tagsOptions: [{ value: '奇特' }]
    })

    // -----表单确认事件------
    async function onSubmit () {
      if (route.query.id) {
        // 修改
        await update(state.form)
        router.push({ path: 'list' })
      } else {
        // 新增
        await add(state.form)
        router.push({ path: 'list' })
      }
    }
    // ----接收数据回显数据----
    const route = useRoute()
    async function getList () {
      if (route.query.id) {
        const { data } = await detail({ id: route.query.id })
        console.log(data)
        state.form = data
        const res = await directorysSimple({ subjectID: state.form.subjectID })
        state.catalogIDOptions = res.data
        state.form.option = data.options
        gstListTgs({ subjectID: state.form.subjectID })
      }
    }
    // 试题标签
    async function gstListTgs (id) {
      const { data } = await listTgs(id)
      state.tagsOptions = data.items
      console.log(data)
    }
    // 增加选项
    function addOption () {
      const arr = [{
        label: 'E',
        value: 5
      }, {
        label: 'F',
        value: 6
      }, {
        label: 'G',
        value: 7
      }]
      if (state.optionOptions.length < 7) {
        state.form.options.push({ isRight: false, code: 'A', title: '55', img: '' })
        state.optionOptions.push(arr[state.optionOptions.length - 4])
      } else {
        ElMessage.error('住手，你们不要再打了')
      }
    }
    // 单选按钮监听
    watch(() => state.form.questionType, (count) => {
      if (count === 2) {
        state.form.option = []
      } else {
        state.form.options = [
          { isRight: false, code: 'A', title: '22', img: '' },
          { isRight: false, code: 'B', title: '33', img: '' },
          { isRight: false, code: 'C', title: '44', img: '' },
          { isRight: false, code: 'D', title: '55', img: '' }
        ]
        state.optionOptions = [{
          label: 'A',
          value: 1
        }, {
          label: 'B',
          value: 2
        }, {
          label: 'C',
          value: 3
        }, {
          value: 4,
          label: 'D'
        }]
      }
    })
    // -----企业------
    async function getCompany () {
      const { data } = await listCompany({ id: route.query.id })
      state.companyOptions = data.items
      console.log(state.companyOptions)
    }
    // ----城市----
    function getCitys () {
      state.provincesOptions = provinces()
    }
    // -----城市下拉菜单-----
    function changeCity (val) {
      state.citysOptions = citys(val)
    }
    // ------ 学科-----
    async function getSubjectIDOptions () {
      const { data } = await subjectsSimple()
      state.subjectIDOptions = data
    }
    // ---学科下拉菜单----
    async function change (val) {
      const { data } = await directorysSimple({ subjectID: val })
      state.form.catalogID = undefined
      state.catalogIDOptions = data
    }

    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs.vForm.validate(valid => {
        if (!valid) return 1
        // TODO: 提交表单
      }, { deep: true }, { immediate: true })
    }
    const resetForm = () => {
      instance.ctx.$refs.vForm.resetFields()
    }
    onMounted(() => {
      getSubjectIDOptions()
      getCompany()
      getCitys()
      getList()
    })
    return {
      ...toRefs(state),
      submitForm,
      resetForm,
      getList,
      getSubjectIDOptions,
      getCompany,
      getCitys,
      changeCity,
      change,
      addOption,
      onSubmit,
      direction,
      gstListTgs
    }
  }
})

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}

.ql-toolbar.ql-snow {
  width: 100% !important;
}

.ql-container {
  width: 100%;
  height: 200px;
}

::v-deep(.el-card__body) {
  padding-left: 50px;
}

.LimitWidth {
  width: 400px !important;
}

//单选
.FourRadio {
  width: 30px;

  .el-radio {
    height: 80px;
  }

  .el-checkbox {
    height: 80px;
  }

  .el-form-item {
    height: 60px !important;
    margin-right: 10px;
  }
}

::v-deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: 60px;
}

::v-deep(.ql-toolbar.ql-snow) {
  width: 100%;
}
</style>
